<!DOCTYPE html>
<!--声明 Thymeleaf 的命名空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
</head>
<!-- 引入bootstrap的css -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap.css">
<link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap-theme.css">
<!-- 引入jquery的js -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<!-- 引入bootstrap的js -->
<script type="text/javascript" src="../js/bootstrap/bootstrap3/js/bootstrap.js"></script>
<!-- 引入树的相关的css、js -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap-treeview/bootstrap-treeview.min.css">
<script type="text/javascript" src="../js/bootstrap/bootstrap-treeview/bootstrap-treeview.min.js"></script>
<!-- 引入选项卡的相关的css、js -->
<link rel="stylesheet" href="../js/bootstrap/bootStrap-addTabs/bootstrap.addtabs.css">
<script type="text/javascript" src="../js/bootstrap/bootStrap-addTabs/bootstrap.addtabs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <a class="navbar-brand" href="http://localhost:8084/movie/homepage" target=\"view_window\">买票票</a>
        <ul class="nav navbar-nav navbar-right">
            <li>欢迎${session.user.name}登录</li>
            <li><a href=javascript=zhuxiao()>注销</a></li>
        </ul>
    </div>
</nav>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <div id="myTree"></div>
        </div>
        <div class="col-md-10">
            <!-- 选项卡 -->
            <div id="myTabs">
                <!-- 新选项卡 -->
                <ul class="nav nav-tabs" id="tablist">
                    <li role="presentation" class="active">
                        <a href="#home" role="tab" data-toggle="tab">欢迎</a>
                    </li>
                </ul>
                <!-- 选项卡下内容 -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="home">
                        <!--echar 报表-->
                        <div id="main" style="width:800px; height: 300px;margin:0px auto;"></div>
                        <div id="main2" style="width:500px; height: 500px;margin:0px auto;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    $(function(){
        findTree();
    })
    function findTree(){
        $.ajax({
            url:"/lzyMovie/findTreeRole",
            success:function(data){
                $('#myTree').treeview({
                    data:data,
                    onNodeSelected:function(event, node) {
                        //添加选项卡
                        $.addtabs({iframeHeight: 800});
                        $.addtabs.add({
                            id:node.id,
                            title:node.text,
                            url:node.href
                        });
                    }
                })
            }
        });
    }
</script>
</html>